<template>
  <div class="flowpanel" :style="{...PanelStyle,...sty}"
       @mouseup="mouseup"
       @mouseover="hover=true"
       @mouseenter="hover=true"
       @mouseleave="delayClose">
    <div class="fheader"
         @focusout="focusout"
         @mousedown="mousedown"
         @mouseup="mouseup"
         @click="changeZindex">
      <slot name="header"></slot>
    </div>
    <div class="fcont">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'FlowPanel',
    components: {},
    props: {
      width: {
        default: '100%'
      },
      height: {
        default: 240
      },
      sty: {
        type: Object,
        default: () => {
          return {};
        }
      },
      autoclose: {//是否自动关闭
        default: false
      },
      candrag: { //是否可拖拽
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        hover: false,
        Drag: {
          status: false,
          rx: null,
          ry: null,
          sefWidth: null,
          sefHeight: null,
          bdWidth: null,
          bdHeight: null
        },
        zIndex: 990
      };
    },
    computed: {
      PanelStyle() {
        let sty = {};
        sty.width = typeof this.width == 'string' ? this.width : this.width + 'px';
        sty.height = typeof this.height == 'string' ? this.height : this.height + 'px';
        sty['z-index'] = this.zIndex;
        return sty;
      }
    },
    created() {
    },
    mounted() {
      this.changeZindex();
    },
    methods: {
      //延时关闭
      delayClose() {
        if (this.autoclose) {
          this.hover = false;
          let that = this;
          setTimeout(() => {
            if (!that.hover) {
              that.$emit('close');
            }
          }, 1000);
        }
      },

      focusout(e) {
        this.Drag.status = false;
      },
      mousedown(e) {
        this.changeZindex();

        if (!this.candrag) {
          return;
        }
        let t = this.$el;

        this.Drag.sefWidth = parseInt(t.offsetWidth) || 0;
        this.Drag.sefHeight = parseInt(t.offsetHeight) || 0;
        this.Drag.bdWidth = document.body.clientWidth;
        this.Drag.bdHeight = document.body.clientHeight;

        let pLeft = t.offsetLeft; //左
        let pTop = t.offsetTop;  //上

        this.Drag.rx = e.pageX - (parseInt(pLeft) || 0);
        this.Drag.ry = e.pageY - (parseInt(pTop) || 0);

        css(t, {cursor: 'move'});
        this.Drag.status = true;
        document.addEventListener('mousemove', this.drag);
      },

      mouseup(e) {
        css(this.$el, {cursor: 'auto'});
        this.Drag.status = false;
        document.removeEventListener('mousemove', this.drag);
      },

      //拖拽面板
      drag(event) {
        event.preventDefault();
        if (this.Drag.status) {
          //判断是否超出边界
          let top = event.pageY - this.Drag.ry;
          let left = event.pageX - this.Drag.rx;

          //下超出
          // if (top + this.Drag.sefHeight >= this.Drag.bdHeight) {
          //   return false;
          // }
          //右超出
          // if (left + this.Drag.sefWidth >= this.Drag.bdWidth) {
          //   return false;
          // }
          //顶部 和 左 超出
          // if (top < 5 || left < 5) {
          // if (top < 2) {
          //   return false;
          // }
          css(this.$el, {top: top + 'px', left: left + 'px'});
        }
      },

      changeZindex() {
        this.zIndex = 999;
      }
    },
    watch: {},
    beforeDestroy() {
    }
  };
</script>

<style scoped lang="less">
  .flowpanel {
    pointer-events: auto;
    position: absolute;
    z-index: 999;
    overflow: hidden;
    transition: width .2s ease-in-out;
    border-radius: 5px;

    .fheader {
      background-color: #c3dffc;
      height: 35px;
      line-height: 35px;
    }

    .fcont {
      background-color: rgba(255, 255, 255, 0.95);
      height: calc(100% - 35px);
      padding: 5px;
      overflow: auto;
      color: #000000;
    }
  }
</style>